<template>
	<view class="service-container">
		<view class="qr-code-section">
			<view class="title">扫码添加客服咨询</view>
			<view class="qr-code-wrapper">
				<image
					class="qr-code-image"
					:src="qrcode"
					mode="aspectFit"
					@longpress="saveQRCode"
				></image>
			</view>
			<view class="tip-text">长按二维码可保存到相册</view>
			<button open-type="contact" class="contact-btn">点击联系客服</button>
		</view>
		
		<u-tabbar @change="beforeSwitch" active-color="#FFC300" inactive-color="#333" v-model="current" :list="tabbarList" icon-size="55" height="120rpx" :mid-button="false"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        qrcode: ''
			}
		},
    onLoad() {
      this.$api.getConfigByKey('service_qrcode').then(res => {
        this.qrcode = res.value
      })
    },
		methods: {
			saveQRCode() {
				uni.showModal({
					title: '保存二维码',
					content: '是否保存二维码到相册？',
					success: (res) => {
						if (res.confirm) {
							uni.saveImageToPhotosAlbum({
								filePath: '/static/image/qr-code.png',
								success: () => {
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: () => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.service-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	.contact-btn {
		width: 240rpx;
		height: 80rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFC300;
		color: #333;
		margin-top: 40rpx;
		font-size: 26rpx;
		&::after {
			border: none;
		}
	}
}

.qr-code-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 60rpx;
	text-align: center;
}

.qr-code-wrapper {
	background: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
}

.qr-code-image {
	width: 400rpx;
	height: 400rpx;
	display: block;
}

.tip-text {
	font-size: 28rpx;
	color: #666;
	text-align: center;
}
</style>
